<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商家管理页面</title>
  <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
  <script src="js/vue@2.7.10.js"></script>
  <script src="/element-ui/lib/index.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <style>
    body {
      overflow-y: hidden;
      margin: 0;
      padding: 0;
    }
    /* 保证iframe填满容器 */
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container style="height: 100vh;">
    <!-- 侧边栏 -->
    <el-aside width="200px">
      <el-menu
              default-active="dashboard"
              class="el-menu-vertical-demo"
              @select="handleSelect"
      >
        <el-menu-item index="dashboard">主页</el-menu-item>
        <el-menu-item index="appointment">预约管理</el-menu-item>
        <el-menu-item index="order">订单管理</el-menu-item>
        <el-menu-item index="service">服务项目管理</el-menu-item>
        <el-menu-item index="employee">员工管理</el-menu-item>
        <el-menu-item index="user">客户信息</el-menu-item>
        <el-menu-item index="notification">用户咨询</el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 正文区域：iframe展示页面 -->
    <el-main style="padding: 0;">
      <iframe :src="iframeSrc"></iframe>
    </el-main>
  </el-container>
</div>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        // 默认显示主页（仪表盘）页面
        iframeSrc: 'dashboard.html'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        // 定义各菜单项对应的页面地址
        const pageMap = {
          'dashboard': 'dashboard.html',
          'appointment': 'appointment.html',
          'order': 'order.html',
          'service': 'service.html',
          'employee': 'employee.html',
          'user': 'user.html',
          'notification': 'notification.html'
        };
        // 根据选中的菜单项改变iframe的src属性
        this.iframeSrc = pageMap[key] || 'dashboard.html';
      }
    }
  });
</script>
</body>
</html>
